<template>
  <div id="box">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pasWord">
        <el-input v-model="ruleForm.pasWord"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添加用户</el-button>
        <el-button @click="resetForm('ruleForm')">重置信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as api from "../../api"
export default {
  data() {
    return {
      ruleForm: {
        userName:"",
        pasWord:"",
        phone:"",
        nickName: "",
      },
      rules: {
        userName: [
          { required: true, message: "请设置账户名称", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        pasWord: [
          { required: true, message: "请设置账户密码", trigger: "blur" },
          { min: 3, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        phone: [
          { required: false, message: "请输入🇨🇳手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11位数字", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "请设置账户昵称", trigger: "blur" },
          { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
          message: '添加成功',
          type: 'success'
          });
          //添加操作
          api.addUserApi(this.ruleForm.userName,this.ruleForm.pasWord,this.ruleForm.phone,this.ruleForm.nickName)
          //清空列表
          this.$refs[formName].resetFields();
        } else {
          this.$message.error('添加失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang="less">
    #box{
        .el-form{
            margin:10px auto;
            width:500px;
        }
    }
</style>